import "./index.css";

window.onload = () => {
    MyAjax.ajax({
        type: "GET",
        data: {},
        url: "http://121.4.127.126:3000/api/mob/query-applicant-result",
        before: (xhr) => {
            xhr.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: (xhr) => {
            let data = JSON.parse(xhr.responseText);
            console.log(data.result);
            if (!data.status) {
                let time = data.result.time;
                let nameTxt = document.querySelector(".name-txt");
                let classNameTxt = document.querySelector(".className-txt");
                let groupNameTxt = document.querySelector(".groupName-txt");
                let line = document.querySelector("#line-progress");
                let stepLis = document.querySelectorAll(".step");
                let state = data.result.result;
                let res;
                let sq = document.querySelectorAll(".sq");
                let afters = document.querySelectorAll(".after");
                let texts = document.querySelectorAll(".step-inner");
                let statusText = document.querySelector(".status-text");
                nameTxt.innerText = data.result.name;
                if((state - state % 100) / 100 != 4) {
                    document.querySelector(".time-txt").innerHTML = time;
                }
                
                classNameTxt.innerText = data.result.class;
                groupNameTxt.innerText = (function(num) {
                    switch (num) {
                        case 1:
                            return "前端";
                        case 2:
                            return "后台";
                        case 3:
                            return "安卓";
                        case 4:
                            return "IOS";
                        default:
                            return "default";
                    }
                })(data.result.group)
                switch(data.result.group) {
                    case 1:
                        for(let i = 0; i < afters.length; i++) {
                            afters[i].classList.add("bg-web");
                            sq[i].classList.add("color-web");
                        }
                        statusText.classList.add("color-web");
                        line.classList.add("bg-web")
                        break;
                    case 2:
                        for(let i = 0; i < afters.length; i++) {
                            afters[i].classList.add("bg-java");
                            sq[i].classList.add("color-java");
                        }
                        statusText.classList.add("color-java");
                        line.classList.add("bg-java")
                        break;
                    case 3:
                        for(let i = 0; i < afters.length; i++) {
                            afters[i].classList.add("bg-android");
                            sq[i].classList.add("color-an");
                        }
                        statusText.classList.add("color-an");
                        line.classList.add("bg-android")
                        break;
                    case 4:
                        for(let i = 0; i < afters.length; i++) {
                            afters[i].classList.add("bg-ios");
                            sq[i].classList.add("color-ios");
                        }
                        statusText.classList.add("color-ios");
                        line.classList.add("bg-ios")
                        break;
                }
                if (state == 100) {
                    res = 1;
                } else if (state > 300) {
                    res = state % 10 + 1;
                } else {
                    res = state % 10;
                }
                

                for (let i = 0; i < res; i++) {
                    afters[i].classList.add("active");
                    sq[i].classList.add("active");
                    texts[i].classList.add("active");
                }
                sq[res-1].classList.remove("unshow");
                sq[res-1].classList.add("animation");
                
                line.style.width = (function(num) {
                    switch (num) {
                        case 1:
                            return "3%";
                        case 2:
                            return "33%";
                        case 3:
                            return "66%";
                        case 4:
                            return "100%";
                        default:
                            return "3%";
                    }
                }(res))
                statusText.innerHTML = getStatusText(state);
                if (parseInt(state / 100) === 4) {
                    for(let i = 0; i < sq.length; i++) {
                        sq[i].style.color = "red";
                        
                    }
                    for(let i = 0; i < res; i++) {
                        afters[i].style.background = "red";
                    }
                    sq[res-1].classList.add("unshow");
                    sq[res-1].classList.remove("animation");
                    document.querySelectorAll(".refuse-icon")[res-1].classList.remove("unshow");
                    document.querySelectorAll(".refuse-icon")[res-1].classList.add("refuse-icon-animation");
                    line.style.background = 'red';
                    statusText.classList.add("refuse-text");
                } else {
                   
                    statusText.classList.add("pass-text");
                }

            } else if (data.status === 1) {
                alert("当前用户未登录");
                window.location = "/"
            }
        },
        err: (xhr) => {
            console.log(xhr.status);
        }
    });
}
class MyAjax {
    static ajax(act) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    act.success(xhr);
                } else {
                    act.err(xhr);
                }
            }
        }
        if (act.type == 'GET') {
            for (each in act.data) {
                act.url += act.url.indexOf('?') == -1 ? "?" : "&";
                act.url = act.url + encodeURIComponent(each) + "=" + encodeURIComponent(act.data[each]);
            }
            xhr.open(act.type, act.url, true);
            if (act.before) {
                act.before(xhr);
            }
            xhr.send();
        } else if (act.type === 'POST' && act.dataType === "json") {

            xhr.open(act.type, act.url, true);
            if (act.before) {
                act.before(xhr);
            }
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(JSON.stringify(act.data));
        } else {
            xhr.open(act.type, act.url, true);
            if (act.before) {
                act.before(xhr);
            }
            console.log(act.data);
            xhr.send(act.data);
        }

    }
}

function getStatusText(state) {
    let str = "";
    switch((state - state % 100) / 100) {
        case 1:
            str = "您已经成功报名，请等待面试";
            break;
        case 2:
            str += "您正在进行state面试或评价，请耐心等待结果";
            break;
        case 3:
            str += "恭喜您通过了state面试";
            break;
        case 4:
            str += "很遗憾，您未能通过state面试。不要灰心，再接再厉";
            break;
        case 5:
            str += "您未报名或非法访问";
    }
    switch(state % 100) {
        case 1:
            str = str.replace("state", "第一次");
            break;
        case 2:
            str = str.replace("state", "第二次");
            break;
        case 3:
            str = str.replace("state", "最后一次");
    }
    return str;
}